<template>
  <div class="ant-descriptions ant-descriptions-bordered">
    <div class="ant-descriptions-title">控制目标</div>
    <a-table
      ref="table"
      bordered
      size="middle"
      rowKey="projectName"
      :columns="headers"
      :dataSource="data"
      :pagination="false"
    >
    </a-table>
  </div>
</template>

<script>
export default {
  name: 'Target',
  props: ['report'],
  data() {
    return {}
  },
  computed: {
    headers() {
      let formatHeaders = []
      if (this.report.header) {
        // 不处理数据字段
        const notFormatField = ['projectName']
        // 不处理数据行
        const notFormatRow = ['达标率']
        this.report.header.forEach(item => {
          formatHeaders.push({
            title: item.tableName,
            dataIndex: item.key,
            align: 'center',
            key: item.key,
            customRender: (value, row, index) => {
              if (notFormatRow.includes(row.projectName)) {
                return {
                  children: value, // 这是渲染列的值，支持渲染html
                  attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
                }
              }
              let element = []
              if (value) {
                if (row[`${item.key}State`] == 1) {
                  element = (
                    <div style="position: relative;">
                      <span>{value}</span>
                      <span style="position: absolute;right: 25px;color: red;">↑</span>
                    </div>
                  )
                } else {
                  element.push(value)
                }
              } else {
                element.push('/')
              }
              const obj = {
                children: element, // 这是渲染列的值，支持渲染html
                attrs: {} // 属性有colSpan和 rowSpan， colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。设置的值为多少代表合并的行列为多少
              }
              return obj
            }
          })
        })
      }
      return formatHeaders
    },
    data() {
      return this.report ? this.report.content : []
    }
  }
}
</script>

<style lang="less" scoped>
.ant-descriptions-title.small {
  background-color: #fff;
  padding: 10px;
  text-align: center;
  color: #000;
  border-left: 1px solid #e8e8e8;
  border-right: 1px solid #e8e8e8;
}
</style>

